<template>
  <div class="article-manager">
    <pages-header
      ref="pageHeader"
      :title="$route.params.id ? '编辑报表' : '添加报表'"
      :backUrl="$routeProStr + '/reporting/list'"
    ></pages-header>
    <el-card :bordered="false" shadow="never" class="mt16">
      <el-form
        class="form"
        ref="formValidate"
        :model="formValidate"
        :rules="ruleValidate"
        :label-width="labelWidth"
        :label-position="labelPosition"
        @submit.native.prevent
      >
        <div class="goodsTitle acea-row">
          <div class="title">报表信息</div>
        </div>
        <div class="grid_box">
          <el-form-item label="服务类型：" label-for="service_type_id" prop="service_type_id">
            <el-cascader
              class="content_width"
              v-model="formValidate.service_type_id"
              size="small"
              :options="typeList"
              :props="{ multiple: false, checkStrictly: false, emitPath: false }"
              @change="getServiceTypeDetail"
              clearable
            ></el-cascader>
          </el-form-item>
          <el-form-item label="服务科目：" label-for="service_subject_id" prop="service_subject_id">
            <el-cascader
              class="content_width"
              v-model="formValidate.service_subject_id"
              size="small"
              :options="subjectList"
              :props="{ multiple: false, checkStrictly: false, emitPath: false }"
              clearable
            ></el-cascader>
          </el-form-item>
          <el-form-item label="服务项目名称：" prop="name" label-for="name">
            <el-input v-model="formValidate.name" placeholder="请输入" class="content_width" />
          </el-form-item>
          <el-form-item label="任务负责人/现场指挥：" label-for="conductor_ids" prop="conductor_ids">
            <el-select
              class="content_width"
              v-model="formValidate.conductor_ids"
              multiple
              filterable
              remote
              reserve-keyword
              :remote-method="conductorRemoteMethod"
              :loading="conductorLoading"
              @focus="resetUserList"
            >
              <el-option v-for="item in userList" :key="item.id" :label="item.label" :value="item.id"> </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="现场出队人员：" label-for="reception_ids" prop="reception_ids">
            <el-select
              class="content_width"
              v-model="formValidate.reception_ids"
              multiple
              filterable
              remote
              reserve-keyword
              :remote-method="receptionRemoteMethod"
              :loading="receptionLoading"
              @focus="resetUserList"
            >
              <el-option v-for="item in userList" :key="item.id" :label="item.label" :value="item.id"> </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="后台出队人员：" label-for="backstage_ids" prop="backstage_ids">
            <el-select
              class="content_width"
              v-model="formValidate.backstage_ids"
              multiple
              filterable
              remote
              reserve-keyword
              :remote-method="backstageRemoteMethod"
              :loading="backstageLoading"
              @focus="resetUserList"
            >
              <el-option v-for="item in userList" :key="item.id" :label="item.label" :value="item.id"> </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="车辆信息" label-for="car_ids" prop="car_ids">
            <el-select
              class="content_width"
              v-model="formValidate.car_ids"
              multiple
              filterable
              remote
              reserve-keyword
              :remote-method="carRemoteMethod"
              :loading="carLoading"
              @focus="resetCarList"
            >
              <el-option v-for="item in carList" :key="item.id" :label="item.label" :value="item.id"> </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="相关人：" prop="relevant_person" label-for="relevant_person">
            <el-input
              v-model="formValidate.relevant_person"
              type="textarea"
              placeholder="请输入"
              class="content_width"
            />
          </el-form-item>
          <el-form-item label="报案人：" prop="alarm_person" label-for="alarm_person">
            <el-input v-model="formValidate.alarm_person" placeholder="请输入" class="content_width" />
          </el-form-item>
          <el-form-item label="报案人联系方式：" prop="alarm_mobile" label-for="alarm_mobile">
            <el-input v-model="formValidate.alarm_mobile" placeholder="请输入" class="content_width" />
          </el-form-item>
          <el-form-item label="服务对象：" prop="service_person" label-for="service_person">
            <el-input v-model="formValidate.service_person" placeholder="请输入" class="content_width" />
          </el-form-item>
          <el-form-item label="服务对象联系方式：" prop="service_mobile" label-for="service_mobile">
            <el-input v-model="formValidate.service_mobile" placeholder="请输入" class="content_width" />
          </el-form-item>
          <el-form-item label="首次接触事务时间：" prop="first_service_time">
            <el-date-picker
              clearable
              v-model="formValidate.first_service_time"
              type="datetime"
              format="yyyy/MM/dd HH:mm:ss"
              value-format="yyyy/MM/dd HH:mm:ss"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              class="mr20"
            ></el-date-picker>
          </el-form-item>
          <el-form-item label="救援范围" prop="rescue_scope" label-for="rescue_scope">
            <el-radio-group v-model="formValidate.rescue_scope">
              <el-radio :label="1" class="radio">国内</el-radio>
              <el-radio :label="2">国外</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="省市区：" prop="selectedRegions" label-for="selectedRegions">
            <el-cascader size="large" :options="regions" v-model="selectedRegions" @change="handleChange">
            </el-cascader>
          </el-form-item>
          <el-form-item label="详细地址：" prop="address" label-for="address">
            <el-input v-model="formValidate.address" type="textarea" placeholder="请输入" class="content_width" />
          </el-form-item>
          <el-form-item label="出队时间：" prop="departures_time">
            <el-date-picker
              clearable
              v-model="formValidate.departures_time"
              type="datetime"
              format="yyyy/MM/dd HH:mm:ss"
              value-format="yyyy/MM/dd HH:mm:ss"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              class="mr20"
            ></el-date-picker>
          </el-form-item>
          <el-form-item label="收队时间：" prop="retreat_time">
            <el-date-picker
              clearable
              v-model="formValidate.retreat_time"
              type="datetime"
              format="yyyy/MM/dd HH:mm:ss"
              value-format="yyyy/MM/dd HH:mm:ss"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              class="mr20"
            ></el-date-picker>
          </el-form-item>
          <el-form-item label="其他工具：" prop="other_tools" label-for="other_tools">
            <el-input v-model="formValidate.other_tools" type="textarea" placeholder="请输入" class="content_width" />
          </el-form-item>
          <el-form-item label="事件进展：" prop="event_progress" label-for="event_progress">
            <el-input
              v-model="formValidate.event_progress"
              type="textarea"
              placeholder="请输入"
              class="content_width"
            />
          </el-form-item>
          <el-form-item label="服务时长/人：" prop="service_hour" label-for="service_hour">
            <el-input
              v-model="formValidate.service_hour"
              placeholder="请输入"
              class="content_width"
              type="number"
              step="0.5"
              min="0"
            />
          </el-form-item>
          <el-form-item label="任务总结：" prop="summarize" label-for="summarize">
            <el-input v-model="formValidate.summarize" type="textarea" placeholder="请输入" class="content_width" />
          </el-form-item>
          <el-form-item label="总结人：" prop="summarize_people" label-for="summarize_people">
            <el-input
              v-model="formValidate.summarize_people"
              type="textarea"
              placeholder="请输入"
              class="content_width"
            />
          </el-form-item>
          <el-form-item label="保密：" prop="status" label-for="status">
            <el-radio-group v-model="formValidate.status">
              <el-radio :label="1" class="radio">是</el-radio>
              <el-radio :label="0">否</el-radio>
            </el-radio-group>
          </el-form-item>
        </div>
        <el-form-item label="装备信息：" label-for="equipment_ids" prop="equipment_ids">
            <el-select
              class="content_width"
              v-model="formValidate.equipment_ids"
              multiple
              filterable
              remote
              reserve-keyword
              :remote-method="equipmentRemoteMethod"
              :loading="equipmentLoading"
              @focus="resetEquipmentList"
              @change="changeEquipmentList"
            >
              <el-option v-for="item in equipmentList" :key="item.id" :label="item.label" :value="item.id"> </el-option>
            </el-select>
            <div id="equipment">
              <div v-for="(item, index) in equipmentArr" :key="index + 'equip'" style="display: flex; align-items: center; margin-right: 10px;">
                <input :id="'equip-name-' + item.id" :value="item.name" type="hidden" />
                <div>名称：{{ item.name }} 数量：</div>
                <input :id="'equip-number-' + item.id" :value="item.number" style="width: 80px;" />
              </div>
            </div>
          </el-form-item>
        <el-form-item label="事件照片：" prop="images" label-for="images">
          <div class="picBox" v-db-click @click="modalPicTap('多选')">
            <div class="pictrue" v-for="(item, index) in formValidate.images" :key="index">
              <img v-lazy="item" />
              <i class="el-icon-error btndel" v-db-click @click.stop="handleRemoveRecommend(index)"></i>
            </div>
            <div class="upLoad acea-row row-center-wrapper">
              <i class="el-icon-plus" style="font-size: 24px"></i>
            </div>
          </div>
        </el-form-item>
        <el-button type="primary" class="submission" v-db-click @click="onsubmit('formValidate')">提交</el-button>
      </el-form>

      <el-dialog :visible.sync="modalPic" width="950px" title="上传商品图" :close-on-click-modal="false">
        <uploadPictures
          :isChoice="isChoice"
          @getPic="getPic"
          @getPicD="getPicD"
          :gridBtn="gridBtn"
          :gridPic="gridPic"
          :maxLength="5"
          v-if="modalPic"
        ></uploadPictures>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
import { mapState } from 'vuex';
import uploadPictures from '@/components/uploadPictures';
import { regionData, codeToText } from 'element-china-area-data';
import {
  setReporting,
  getReportingDetail,
  getServiceType,
  getServiceSubject,
  getUserList,
  getServiceTypeDetail,
  getEquipmentList,
  getCarList,
  getEquipList,
} from '@/api/reporting';
export default {
  name: 'addReporting',
  components: { uploadPictures },
  data() {
    const validateUpload1 = (rule, value, callback) => {
      if (this.formValidate.service_type_id) {
        callback();
      } else {
        callback(new Error('请选择服务类型'));
      }
    };
    const validateUpload2 = (rule, value, callback) => {
      if (!this.formValidate.service_subject_id) {
        callback(new Error('请选择服务科目'));
      } else {
        callback();
      }
    };
    const validateUpload3 = (rule, value, callback) => {
      if (!this.formValidate.first_service_time) {
        callback(new Error('请选择首次接触事务时间'));
      } else {
        callback();
      }
    };
    const validateUpload4 = (rule, value, callback) => {
      if (!this.formValidate.rescue_scope) {
        callback(new Error('请选择救援范围'));
      } else {
        callback();
      }
    };
    const validateUpload5 = (rule, value, callback) => {
      if (!this.formValidate.area) {
        callback(new Error('请选择省市区'));
      } else {
        callback();
      }
    };
    const validateUpload6 = (rule, value, callback) => {
      if (!this.formValidate.conductor_ids) {
        callback(new Error('请选择负责人/现场指挥'));
      } else {
        callback();
      }
    };
    const validateUpload7 = (rule, value, callback) => {
      if (!this.formValidate.reception_ids) {
        callback(new Error('请选择现场出队人员'));
      } else {
        callback();
      }
    };
    const validateUpload8 = (rule, value, callback) => {
      if (!this.formValidate.departures_time) {
        callback(new Error('请选择出队时间'));
      } else {
        callback();
      }
    };
    const validateUpload10 = (rule, value, callback) => {
      if (!this.formValidate.images) {
        callback(new Error('请上传事件照片'));
      } else {
        callback();
      }
    };
    const validateUpload11 = (rule, value, callback) => {
      if (!this.formValidate.status && this.formValidate.status != 0) {
        callback(new Error('请选择是否保密'));
      } else {
        callback();
      }
    };
    return {
      isChoice: '单选',
      gridPic: {
        xl: 6,
        lg: 8,
        md: 12,
        sm: 12,
        xs: 12,
      },
      gridBtn: {
        xl: 4,
        lg: 8,
        md: 8,
        sm: 8,
        xs: 8,
      },
      loading: false,
      formValidate: {
        id: 0,
        service_type_id: 0,
        service_subject_id: 0,
        conductor_ids: '',
        reception_ids: '',
        backstage_ids: '',
        name: '',
        relevant_person: '',
        alarm_person: '',
        alarm_mobile: '',
        service_person: '',
        service_mobile: '',
        first_service_time: '',
        rescue_scope: 1,
        province: '',
        city: '',
        area: '',
        province_code: '',
        city_code: '',
        area_code: '',
        address: '',
        departures_time: '',
        retreat_time: '',
        other_tools: '',
        event_progress: '',
        service_hour: '',
        summarize: '',
        summarize_people: '',
        images: '',
        status: 0,
        equipment_ids: '',
        car_ids: '',
      },
      ruleValidate: {
        service_type_id: [{ required: true, validator: validateUpload1, trigger: 'change', type: 'number' }],
        service_subject_id: [{ required: true, validator: validateUpload2, trigger: 'change', type: 'number' }],
        name: [{ required: true, message: '请输入服务项目名称', trigger: 'blur' }],
        first_service_time: [{ required: true, validator: validateUpload3, trigger: 'change', type: 'number' }],
        rescue_scope: [{ required: true, validator: validateUpload4, trigger: 'change', type: 'number' }],
        selectedRegions: [{ required: true, validator: validateUpload5, trigger: 'change' }],
        address: [{ required: true, message: '请输入详细地址', trigger: 'blur' }],
        conductor_ids: [{ required: true, validator: validateUpload6, trigger: 'change' }],
        reception_ids: [{ required: true, validator: validateUpload7, trigger: 'change' }],
        departures_time: [{ required: true, validator: validateUpload8, trigger: 'change', type: 'number' }],
        event_progress: [{ required: true, message: '请输入事件进展', trigger: 'blur' }],
        service_hour: [{ required: true, message: '请输入服务时长', trigger: 'blur' }],
        images: [{ required: true, validator: validateUpload10, trigger: 'change', type: 'number' }],
        status: [{ required: true, validator: validateUpload11, trigger: 'change', type: 'number' }],
      },
      modalPic: false,
      typeList: [],
      subjectList: [],
      userList: [],
      subjectIds: '',
      regions: regionData,
      selectedRegions: [],
      conductorLoading: false,
      receptionLoading: false,
      backstageLoading: false,
      equipmentList: [],
      carList: [],
      equipmentArr: []
    };
  },
  computed: {
    ...mapState('media', ['isMobile']),
    labelWidth() {
      return this.isMobile ? undefined : '200px';
    },
    labelPosition() {
      return this.isMobile ? 'top' : 'right';
    },
  },
  watch: {
    $route(to, from) {
      if (this.$route.params.id) {
        this.getDetails();
      } else {
        this.formValidate = {
          id: 0,
          service_type_id: 0,
          service_subject_id: 0,
          conductor_ids: '',
          reception_ids: '',
          backstage_ids: '',
          name: '',
          relevant_person: '',
          alarm_person: '',
          alarm_mobile: '',
          service_person: '',
          service_mobile: '',
          first_service_time: '',
          rescue_scope: 1,
          province: '',
          city: '',
          area: '',
          province_code: '',
          city_code: '',
          area_code: '',
          address: '',
          departures_time: '',
          retreat_time: '',
          other_tools: '',
          event_progress: '',
          service_hour: '',
          summarize: '',
          summarize_people: '',
          images: '',
          status: 0,
          equipment_ids: '',
          car_ids: '',
        };
      }
    },
  },
  methods: {
    changeEquipmentList(e) {
      let equipDom = document.getElementById('equipment');

      if (e.length > 0) {
        getEquipList({ ids: e }).then(async (res) => {
          if (res.status == 200 && res.data.length > 0) {
            const list = res.data;
            equipDom.innerHTML = '';
            list.forEach((item) => {
              if (this.equipmentArr[item.id]) {
                equipDom.innerHTML += '<div style="display: flex; align-items: center; margin-right: 10px;"><input id="equip-name-'+item.id+'" type="hidden" value="'+item.name+'" /><div>名称：'+item.name+' 数量：</div><input id="equip-number-'+item.id+'" style="width: 80px;" value="'+this.equipmentArr[item.id].number+'" /></div>';
              } else {
                equipDom.innerHTML += '<div style="display: flex; align-items: center; margin-right: 10px;"><input id="equip-name-'+item.id+'" type="hidden" value="'+item.name+'" /><div>名称：'+item.name+' 数量：</div><input id="equip-number-'+item.id+'" style="width: 80px;" /></div>';
              }
            });
          }
        });
      } else {
        equipDom.innerHTML = '';
      }
    },
    resetEquipmentList(e) {
      this.getEquipmentList();
    },
    resetCarList(e) {
      this.getCarList();
    },
    resetUserList(e) {
      this.getUserList();
    },
    conductorRemoteMethod(query) {
      if (query !== '') {
        this.getUserList(query);
      }
    },
    receptionRemoteMethod(query) {
      if (query !== '') {
        this.getUserList(query);
      }
    },
    backstageRemoteMethod(query) {
      if (query !== '') {
        this.getUserList(query);
      }
    },
    equipmentRemoteMethod(query) {
      if (query !== '') {
        this.getEquipmentList(query);
      }
    },
    carRemoteMethod(query) {
      if (query !== '') {
        this.getCarList(query);
      }
    },
    getEquipmentList(search = '') {
      let data = { search: search };

      getEquipmentList(data)
        .then(async (res) => {
          this.equipmentList = res.data;
        })
        .catch((res) => {
          this.$message.error(res.msg);
        });
    },
    getCarList(search = '') {
      let data = { search: search };

      getCarList(data)
        .then(async (res) => {
          this.carList = res.data;
        })
        .catch((res) => {
          this.$message.error(res.msg);
        });
    },
    handleChange() {
      this.formValidate.province = codeToText[this.selectedRegions[0]];
      this.formValidate.city = codeToText[this.selectedRegions[1]];
      this.formValidate.area = codeToText[this.selectedRegions[2]];

      this.formValidate.province_code = this.selectedRegions[0];
      this.formValidate.city_code = this.selectedRegions[1];
      this.formValidate.area_code = this.selectedRegions[2];
    },
    getServiceType() {
      getServiceType()
        .then(async (res) => {
          this.typeList = res.data;
        })
        .catch((res) => {
          this.$message.error(res.msg);
        });
    },
    getServiceSubject() {
      getServiceSubject({ ids: this.subjectIds })
        .then(async (res) => {
          this.subjectList = res.data;
        })
        .catch((res) => {
          this.$message.error(res.msg);
        });
    },
    getUserList(search = '') {
      let data = { search: search };

      getUserList(data)
        .then(async (res) => {
          this.userList = res.data;
        })
        .catch((res) => {
          this.$message.error(res.msg);
        });
    },
    // 选择图片
    modalPicTap(isChoice) {
      this.isChoice = isChoice;
      this.modalPic = true;
    },
    // 选中图片（单）
    getPic(pc) {
      this.formValidate.images = pc.att_dir;
      this.modalPic = false;
    },
    // 选中图片（多）
    getPicD(pc) {
      let images = pc;
      if (images) this.formValidate.images = [];
      images.map((item) => {
        this.formValidate.images.push(item.att_dir);
        this.formValidate.images = this.formValidate.images.splice(0, 10);
      });
      this.modalPic = false;
    },
    handleRemoveRecommend(i) {
      this.formValidate.images.splice(i, 1);

      if (this.formValidate.images.length == 0) this.formValidate.images = '';
    },
    // 提交数据
    onsubmit(name) {
      let equipmentArray = new Array();

      if (this.formValidate.equipment_ids.length > 0) {
        let equipmentIds = this.formValidate.equipment_ids;
        equipmentIds.forEach((item) => {
          let number = document.getElementById('equip-number-' + item).value;
          let name = document.getElementById('equip-name-' + item).value;

          if (!number || number < 1) {
            this.$message.error('请填写装备数量');

            document.getElementById('equip-number-' + item).focus();

            throw new Error('simulation break');
          }

          if (!Number.isInteger(Number(number))) {
            this.$message.error('装备数量必须是整数' + item);

            document.getElementById('equip-number-' + item).focus();

            throw new Error('simulation break');
          }

          equipmentArray.push({id: item, name: name, number: number})
        });
      }

      this.formValidate.equipment_array = equipmentArray;

      this.$refs[name].validate((valid) => {
        if (valid) {
          let data = {
            url: this.formValidate.id ? `report/report/${this.formValidate.id}` : 'report/report',
            method: this.formValidate.id ? 'put' : 'post',
            datas: this.formValidate,
          };

          setReporting(data)
            .then(async (res) => {
              this.$message.success(res.msg);
              setTimeout(() => {
                this.$router.push({ path: this.$routeProStr + '/reporting/list' });
              }, 500);
            })
            .catch((res) => {
              this.$message.error(res.msg);
            });
        } else {
          return false;
        }
      });
    },
    // 详情
    getDetails() {
      getReportingDetail(this.$route.params.id)
        .then(async (res) => {
          let data = res.data;
          this.equipmentArr = res.data.equipment;
          this.formValidate = {
            id: data.id,
            service_type_id: data.service_type_id,
            service_subject_id: data.service_subject_id,
            conductor_ids: data.conductor_ids,
            reception_ids: data.reception_ids,
            backstage_ids: data.backstage_ids,
            name: data.name,
            relevant_person: data.relevant_person,
            alarm_person: data.alarm_person,
            alarm_mobile: data.alarm_mobile,
            service_person: data.service_person,
            service_mobile: data.service_mobile,
            first_service_time: data.first_service_time,
            rescue_scope: data.rescue_scope,
            province: data.province,
            city: data.city,
            area: data.area,
            province_code: data.province_code,
            city_code: data.city_code,
            area_code: data.area_code,
            address: data.address,
            departures_time: data.departures_time,
            retreat_time: data.retreat_time,
            other_tools: data.other_tools,
            event_progress: data.event_progress,
            service_hour: data.service_hour,
            summarize: data.summarize,
            summarize_people: data.summarize_people,
            images: data.images,
            status: data.status,
            equipment_ids: data.equipment_ids,
            car_ids: data.car_ids,
          };
          this.selectedRegions = data.area_code;
        })
        .catch((res) => {
          this.loading = false;
          this.$message.error(res.msg);
        });
    },
    getServiceTypeDetail(id) {
      if (!id) {
        this.formValidate.service_subject_id = 0;
        this.subjectIds = '';
        this.getServiceSubject();
      } else {
        getServiceTypeDetail({ id: id })
          .then(async (res) => {
            this.subjectIds = res.data.subject_ids;
            this.getServiceSubject();
          })
          .catch((res) => {
            this.$message.error(res.msg);
          });
      }
    },
  },
  mounted() {
    if (this.$route.params.id) {
      this.getDetails();
    }
  },
  created() {
    this.getServiceType();
    this.getServiceSubject();
    this.getUserList();
    this.getEquipmentList();
    this.getCarList();
  },
};
</script>
<style scoped lang="scss">
.grid_box {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: auto;
  grid-gap: 0;
}

.content_width {
  width: 414px;
}
::v-deep .ivu-form-item-content {
  line-height: unset !important;
}
.picBox {
  display: flex;
  cursor: pointer;
}

.pictrue {
  width: 60px;
  height: 60px;
  border: 1px dotted rgba(0, 0, 0, 0.1);
  margin-right: 15px;
  display: inline-block;
  position: relative;
  cursor: pointer;

  img {
    width: 100%;
    height: 100%;
  }

  .btndel {
    position: absolute;
    z-index: 1;
    width: 20px !important;
    height: 20px !important;
    left: 46px;
    top: -4px;
    color: #000;
  }
}

.form .goodsTitle {
  border-bottom: 1px solid rgba(0, 0, 0, 0.09);
  margin-bottom: 25px;
}

.form .goodsTitle ~ .goodsTitle {
  margin-top: 20px;
}

.form .goodsTitle .title {
  border-bottom: 2px solid var(--prev-color-primary);
  padding: 0 8px 12px 5px;
  color: #000;
  font-size: 14px;
}

.form .goodsTitle .icons {
  font-size: 15px;
  margin-right: 8px;
  color: #999;
}

.form .add {
  font-size: 12px;
  color: var(--prev-color-primary);
  padding: 0 12px;
  cursor: pointer;
}

.form .radio {
  margin-right: 20px;
}

.form .submission {
  width: 10%;
  margin-left: 27px;
}

.form .upLoad {
  width: 58px;
  height: 58px;
  line-height: 58px;
  border: 1px dotted rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.02);
}

.form .iconfont {
  color: #898989;
}

.form .pictrue {
  width: 60px;
  height: 60px;
  border: 1px dotted rgba(0, 0, 0, 0.1);
  margin-right: 10px;
}

.form .pictrue img {
  width: 100%;
  height: 100%;
}

.Modals .address {
  width: 90%;
}

.Modals .address .iconfont {
  font-size: 20px;
}
.tip {
  margin-top: 10px;
  color: #bbb;
  font-size: 12px;
}
#equipment {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  height: auto;
}
</style>
